<template>
  <main style="background-color: #f5f6f8; padding: 1.5rem 0; min-height: 100vh">
    <van-form @submit="onSubmit" label-width="5em">
      <van-cell-group inset>
        <van-field
          v-model="job.username"
          name="username"
          size="large"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          name="class"
          label="班级"
          :rules="[{ required: true, message: '请选择班级' }]"
          size="large"
        >
          <template #input>
            <van-radio-group v-model="job.class" direction="horizontal">
              <van-radio name="1">小班</van-radio>
              <van-radio name="2">中班</van-radio>
              <van-radio name="3">大班</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-model="job.id" name="id" type="hidden" v-show="false" />
      </van-cell-group>
      <div style="margin: 35px">
        <van-button round block type="primary" native-type="submit"> 保 存 </van-button>
      </div>
    </van-form>
  </main>
</template>

<script setup>
import { useUserInfoStore } from '@/stores/user.js' // 导入自定义的用户信息 store
import { storeToRefs } from 'pinia' // 导入 pinia 库中的 storeToRefs 函数
import { showToast } from 'vant' // 导入 Vant 库中的提示组件函数
import { ref } from 'vue' // 导入 Vue 的 ref 函数
import { useRoute, useRouter } from 'vue-router' // 导入 Vue Router 的 useRoute 和 useRouter 函数
import { loginEdit } from '../api' // 导入自定义的 API 函数，包括编辑用户信息的函数

const router = useRouter() // 使用 useRouter 函数获取路由实例
const route = useRoute() // 使用 useRoute 函数获取当前路由实例
const userInfoStore = useUserInfoStore() // 使用 useUserInfoStore 函数获取用户信息 store 实例
const { student} = storeToRefs(userInfoStore) // 使用 storeToRefs 将 store 实例转换为响应式数据
const index = route.query.index // 从路由中获取查询参数 index
const job = ref(student.value[index]) // 使用 ref 函数创建存储学生信息的响应式对象 job

async function onSubmit(model) {
  try {
    await loginEdit(model) // 调用编辑用户信息的 API 函数并传入 model 对象
    await userInfoStore.getUserInfo() // 更新用户信息
    showToast(`保存成功`) // 提示保存成功信息
    router.back() // 返回上一页
  } catch (error) {
    showToast(`保存失败`) // 提示保存失败信息
  }
}

</script>

<style lang="less" scoped></style>
